<template>
  <div class="container">
    <div class="avatar">
      <div class="avatar-img"><img :src="userInfo.avatarUrl" alt=""></div>
      <div class="avatar-nickname">{{userInfo.nickname}}</div>
      <div class="avatar-tips">
        <ul>
          <li>{{userInfo.follows}}Follow</li>
          <li>|</li>
          <li>{{userInfo.followeds}}Followers</li>
          <li>|</li>
          <li>Lv.{{level}}</li>
        </ul>
      </div>
    </div>
    <div class="user-songs">
      <div class="text">我的歌单</div>
      <div class="playlists" 
      v-for="(item) in userSongs"
      :key="item.id"
      @click="pushTo(item.id)">
        <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
        <div class="list-name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo:{},
      level:'',
      userSongs:[],
    }
  },
  mounted() {
    // console.log(this.$route.params)
    this.$api.getUserInfo({
      uid:this.$route.params.id
    }).then( res => {
      this.userInfo = res.profile;
      this.level = res.level
      // console.log(res)
    });
    this.$api.getUserSongs({
      uid:this.$route.params.id
    }).then( res => {
      this.userSongs = res.playlist
      console.log(res)
    })
  },
  methods: {
    pushTo(id) {
        this.$router.push(`/toplist/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #EEEEEE;
  .avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90vw;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px 0;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .avatar-img {
      position: relative;
      width: 100px;
      bottom: -100%;
      img {
        border-radius: 100%;
        width: 100%;
      }
    }
    .avatar-nickname {
      font-size: 2em;
      margin: 5px 0;
    }
    .avatar-tips {
      color: #B3B3B3;
      margin: 5px 0;
      ul > li:nth-child(even) {
        margin: 0 10px;
      }
      ul > li {
        float: left;
        list-style: none;
      }
    }
  }
  .user-songs {
    display: flex;
    flex-direction: column;
    width: 90vw;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px 0;
    padding: 20px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .text {
      font-size: 1.3em;
      margin-bottom: 10px;
    }
    .playlists {
      width: 100%;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #B3B3B3;
      padding: 10px 0px;
      .list-img {
        height: 100%;
        img {
          border-radius: 5px;
          height: 100%;
        }
      }
    }
    .playlists:last-child {
      border: none;
    }
    .playlists:active {
      background-color: #f3f3f3;
    }
  }
}
</style>